<ul class="icon-list">
	<li class="icon-list__item">
		<a href="https://twitter.com/alphardex007" target="_blank">
			<div class="box">
				<div class="box__face box__face--front">
					<svg
						t="1580194450242"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="9911"
						width="40"
						height="40"
						><path
							d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"
							p-id="9912"
							fill="#545454"
						/></svg
					>
				</div>
				<div class="box__face box__face--back" />
				<div class="box__face box__face--right" />
				<div class="box__face box__face--left" />
				<div class="box__face box__face--top" />
				<div class="box__face box__face--bottom" />
			</div>
		</a>
	</li>
	<li class="icon-list__item">
		<a href="https://codepen.io/alphardex" target="_blank">
			<div class="box">
				<div class="box__face box__face--front">
					<svg
						t="1580194836809"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="10289"
						width="40"
						height="40"
						><path
							d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"
							p-id="10290"
							fill="#545454"
						/></svg
					>
				</div>
				<div class="box__face box__face--back" />
				<div class="box__face box__face--right" />
				<div class="box__face box__face--left" />
				<div class="box__face box__face--top" />
				<div class="box__face box__face--bottom" />
			</div>
		</a>
	</li>
	<li class="icon-list__item">
		<a href="https://github.com/alphardex" target="_blank">
			<div class="box">
				<div class="box__face box__face--front">
					<svg
						t="1580194880319"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="10619"
						width="40"
						height="40"
						><path
							d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"
							p-id="10620"
							fill="#545454"
						/></svg
					>
				</div>
				<div class="box__face box__face--back" />
				<div class="box__face box__face--right" />
				<div class="box__face box__face--left" />
				<div class="box__face box__face--top" />
				<div class="box__face box__face--bottom" />
			</div>
		</a>
	</li>
	<li class="icon-list__item">
		<a href="https://www.linkedin.com/in/nameless-god-60970313a" target="_blank">
			<div class="box">
				<div class="box__face box__face--front">
					<svg
						t="1580194916849"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="10901"
						width="40"
						height="40"
						><path
							d="M208.603429 808.009143l132.022857 0 0-396.580571-132.022857 0 0 396.580571zM349.110857 289.133714q-0.585143-29.696-20.553143-49.152t-53.174857-19.456-53.979429 19.456-20.845714 49.152q0 29.110857 20.260571 48.859429t52.882286 19.748571l0.585143 0q33.718857 0 54.272-19.748571t20.553143-48.859429zM683.446857 808.009143l132.022857 0 0-227.401143q0-87.990857-41.691429-133.12t-110.299429-45.129143q-77.677714 0-119.442286 66.852571l1.170286 0 0-57.709714-132.022857 0q1.682286 37.741714 0 396.580571l132.022857 0 0-221.696q0-21.723429 4.022857-32.036571 8.557714-19.968 25.746286-34.011429t42.276571-13.970286q66.267429 0 66.267429 89.746286l0 211.968zM950.857143 237.714286l0 548.571429q0 68.022857-48.274286 116.297143t-116.297143 48.274286l-548.571429 0q-68.022857 0-116.297143-48.274286t-48.274286-116.297143l0-548.571429q0-68.022857 48.274286-116.297143t116.297143-48.274286l548.571429 0q68.022857 0 116.297143 48.274286t48.274286 116.297143z"
							p-id="10902"
							fill="#545454"
						/></svg
					>
				</div>
				<div class="box__face box__face--back" />
				<div class="box__face box__face--right" />
				<div class="box__face box__face--left" />
				<div class="box__face box__face--top" />
				<div class="box__face box__face--bottom" />
			</div>
		</a>
	</li>
	<li class="icon-list__item">
		<a href="https://www.instagram.com/mumei_ouja" target="_blank">
			<div class="box">
				<div class="box__face box__face--front">
					<svg
						t="1580194981209"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="11741"
						width="40"
						height="40"
						><path
							d="M851.456 814.884571l0-370.322286-77.165714 0q11.410286 35.986286 11.410286 74.825143 0 71.972571-36.571429 132.827429t-99.401143 96.256-137.142857 35.401143q-112.566857 0-192.585143-77.458286t-80.018286-187.172571q0-38.838857 11.410286-74.825143l-80.603429 0 0 370.322286q0 14.848 10.020571 24.868571t24.868571 10.020571l610.889143 0q14.262857 0 24.576-10.020571t10.313143-24.868571zM689.152 510.317714q0-70.875429-51.712-120.832t-124.854857-50.029714q-72.557714 0-124.269714 50.029714t-51.712 120.832 51.712 120.832 124.269714 50.029714q73.142857 0 124.854857-50.029714t51.712-120.832zM851.456 304.566857l0-94.281143q0-16.018286-11.410286-27.721143t-28.013714-11.702857l-99.401143 0q-16.603429 0-28.013714 11.702857t-11.410286 27.721143l0 94.281143q0 16.603429 11.410286 28.013714t28.013714 11.410286l99.401143 0q16.603429 0 28.013714-11.410286t11.410286-28.013714zM950.857143 185.709714l0 652.580571q0 46.299429-33.133714 79.433143t-79.433143 33.133714l-652.580571 0q-46.299429 0-79.433143-33.133714t-33.133714-79.433143l0-652.580571q0-46.299429 33.133714-79.433143t79.433143-33.133714l652.580571 0q46.299429 0 79.433143 33.133714t33.133714 79.433143z"
							p-id="11742"
							fill="#545454"
						/></svg
					>
				</div>
				<div class="box__face box__face--back" />
				<div class="box__face box__face--right" />
				<div class="box__face box__face--left" />
				<div class="box__face box__face--top" />
				<div class="box__face box__face--bottom" />
			</div>
		</a>
	</li>
</ul>

<style>
	body {
		display: flex;
		height: 100vh;
		justify-content: center;
		align-items: center;
		background: #ccc;
	}

	.icon-list {
		display: flex;
		list-style-type: none;
	}
	.icon-list .icon-list__item {
		margin: 0 40px;
	}
	.icon-list .icon-list__item a .box {
		--box-width: 80px;
		--box-height: 80px;
		--box-depth: 20px;
		width: var(--box-width);
		height: var(--box-height);
		position: relative;
		transform-style: preserve-3d;
		transform: rotateX(55deg) rotateZ(45deg);
		transition: 0.5s;
	}
	.icon-list .icon-list__item a .box .box__face {
		position: absolute;
		font-size: 10px;
		font-weight: bold;
		color: white;
		text-align: center;
	}
	.icon-list .icon-list__item a .box .box__face--front,
	.icon-list .icon-list__item a .box .box__face--back {
		width: var(--box-width);
		height: var(--box-height);
		line-height: var(--box-height);
	}
	.icon-list .icon-list__item a .box .box__face--right,
	.icon-list .icon-list__item a .box .box__face--left {
		width: var(--box-depth);
		height: var(--box-height);
		left: calc((var(--box-width) - var(--box-depth)) / 2);
		line-height: var(--box-height);
	}
	.icon-list .icon-list__item a .box .box__face--top,
	.icon-list .icon-list__item a .box .box__face--bottom {
		width: var(--box-width);
		height: var(--box-depth);
		top: calc((var(--box-height) - var(--box-depth)) / 2);
		line-height: var(--box-depth);
	}
	.icon-list .icon-list__item a .box .box__face--front {
		display: flex;
		justify-content: center;
		align-items: center;
		background: white;
		transition: 0.5s;
	}
	.icon-list .icon-list__item a .box .box__face--front svg {
		transform: rotate(270deg);
	}
	.icon-list .icon-list__item a .box .box__face--front svg path {
		transition: 0.5s;
	}
	.icon-list .icon-list__item a .box .box__face--right {
		background: #e6e6e6;
		transition: 0.5s;
	}
	.icon-list .icon-list__item a .box .box__face--bottom {
		background: #b3b3b3;
		transition: 0.5s;
	}
	.icon-list .icon-list__item a .box .box__face--back {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		transition: 0.5s;
	}
	.icon-list .icon-list__item a .box .box__face--front {
		transform: rotateY(0deg) translateZ(calc(var(--box-depth) / 2));
	}
	.icon-list .icon-list__item a .box .box__face--back {
		transform: rotateY(180deg) translateZ(calc(var(--box-depth) / 2));
	}
	.icon-list .icon-list__item a .box .box__face--right {
		transform: rotateY(90deg) translateZ(calc(var(--box-width) / 2));
	}
	.icon-list .icon-list__item a .box .box__face--left {
		transform: rotateY(-90deg) translateZ(calc(var(--box-width) / 2));
	}
	.icon-list .icon-list__item a .box .box__face--top {
		transform: rotateX(90deg) translateZ(calc(var(--box-height) / 2));
	}
	.icon-list .icon-list__item a .box .box__face--bottom {
		transform: rotateX(-90deg) translateZ(calc(var(--box-height) / 2));
	}
	.icon-list .icon-list__item:hover:nth-child(1) a .box {
		transform: rotateX(55deg) rotateZ(45deg) translateZ(20px);
	}
	.icon-list .icon-list__item:hover:nth-child(1) a .box .box__face--back {
		box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.5);
	}
	.icon-list .icon-list__item:hover:nth-child(1) a .box__face--front {
		background: #00aced;
	}
	.icon-list .icon-list__item:hover:nth-child(1) a .box__face--front svg path {
		fill: white;
	}
	.icon-list .icon-list__item:hover:nth-child(1) a .box__face--right {
		background: #0099d4;
	}
	.icon-list .icon-list__item:hover:nth-child(1) a .box__face--bottom {
		background: #0087ba;
	}
	.icon-list .icon-list__item:hover:nth-child(2) a .box {
		transform: rotateX(55deg) rotateZ(45deg) translateZ(20px);
	}
	.icon-list .icon-list__item:hover:nth-child(2) a .box .box__face--back {
		box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.5);
	}
	.icon-list .icon-list__item:hover:nth-child(2) a .box__face--front {
		background: black;
	}
	.icon-list .icon-list__item:hover:nth-child(2) a .box__face--front svg path {
		fill: white;
	}
	.icon-list .icon-list__item:hover:nth-child(2) a .box__face--right {
		background: black;
	}
	.icon-list .icon-list__item:hover:nth-child(2) a .box__face--bottom {
		background: black;
	}
	.icon-list .icon-list__item:hover:nth-child(3) a .box {
		transform: rotateX(55deg) rotateZ(45deg) translateZ(20px);
	}
	.icon-list .icon-list__item:hover:nth-child(3) a .box .box__face--back {
		box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.5);
	}
	.icon-list .icon-list__item:hover:nth-child(3) a .box__face--front {
		background: #24292e;
	}
	.icon-list .icon-list__item:hover:nth-child(3) a .box__face--front svg path {
		fill: white;
	}
	.icon-list .icon-list__item:hover:nth-child(3) a .box__face--right {
		background: #191c20;
	}
	.icon-list .icon-list__item:hover:nth-child(3) a .box__face--bottom {
		background: #0e1011;
	}
	.icon-list .icon-list__item:hover:nth-child(4) a .box {
		transform: rotateX(55deg) rotateZ(45deg) translateZ(20px);
	}
	.icon-list .icon-list__item:hover:nth-child(4) a .box .box__face--back {
		box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.5);
	}
	.icon-list .icon-list__item:hover:nth-child(4) a .box__face--front {
		background: #007bb6;
	}
	.icon-list .icon-list__item:hover:nth-child(4) a .box__face--front svg path {
		fill: white;
	}
	.icon-list .icon-list__item:hover:nth-child(4) a .box__face--right {
		background: #006a9d;
	}
	.icon-list .icon-list__item:hover:nth-child(4) a .box__face--bottom {
		background: #005983;
	}
	.icon-list .icon-list__item:hover:nth-child(5) a .box {
		transform: rotateX(55deg) rotateZ(45deg) translateZ(20px);
	}
	.icon-list .icon-list__item:hover:nth-child(5) a .box .box__face--back {
		box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.5);
	}
	.icon-list .icon-list__item:hover:nth-child(5) a .box__face--front {
		background: #e4405f;
	}
	.icon-list .icon-list__item:hover:nth-child(5) a .box__face--front svg path {
		fill: white;
	}
	.icon-list .icon-list__item:hover:nth-child(5) a .box__face--right {
		background: #e12a4c;
	}
	.icon-list .icon-list__item:hover:nth-child(5) a .box__face--bottom {
		background: #d31e40;
	}
</style>
